<template>
    <div class="body">

        <div class="login">

            <div class="login-box">

              <div @click="closeReg" class="close-window">
                  <Icon type="close-round"></Icon>
              </div>
              
              <div class="title">
                <h2 class="clearfix">
                    <span>会员注册</span>
                    <p>还没有账号&nbsp;&nbsp;<a>立即注册</a></p>
                </h2>
              </div>
              
              <Form ref="login-form" :model="form"  :rules="rules">

                <Form-item prop="name">

                    <Input type="text" v-model="form.name" placeholder="请输入用户名.."  @keyup.native.enter="registerBtn">
                        <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                    </Input>
                </Form-item>

                <Form-item prop="phone">
                    <Input type="text" v-model="form.phone" placeholder="请输入手机号.."  @keyup.native.enter="registerBtn">
                        <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                    </Input>
                </Form-item>

                <Form-item prop="password">
                    <Input type="password" v-model="form.password" placeholder="请输入密码.."  @keyup.native.enter="registerBtn">
                        <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                    </Input>
                </Form-item>

                <Form-item prop="code">

                    <Input type="text" style="width:50%;float:left" v-model="form.code" placeholder="验证码.."  @keyup.native.enter="registerBtn">

                        <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->

                    </Input>

                    <Button style="float:left;margin-left:12px;" :disabled="disabled"  @click="codeBtn">{{ codeText}}</Button>

                </Form-item>
                <Form-item>

                    <Button type="success"  long @click.stop="registerBtn"> 注 册 </Button>

                    <!--<a href="javascript:;" @click="toLogin">已有账号!马上登录</a>-->

                </Form-item>
            </Form>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data () {
            return {
               
				usernamer:'',
				password:'',
				code:'',
				testCode:'',
				disabled:false,
				codeText:'获取验证码',
                form: {
                  name: null,
                  phone:null,
                  password: null,
                  code:null,
                },
                rules: {
                  phone: [
                    { required: true, pattern: /^((0\d{2,3}\d{7,8})|(1[35874]\d{9}))$/, message: '请输入正确的账号', trigger: 'blur,change' }
                  ],
                  password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                  ]
                }
               }
        },
        methods:{

            registerBtn() {

                this.$refs['login-form'].validate((valid) => {
                    
                  if (valid) {

                    this.pending = true;

                    this.$http.post('member/add', {name:this.form.name, password:this.form.password, phone:this.form.phone, code:this.form.code}).then(response => {

                      this.$Notice.success({

                          title: '注册成功！',
                      });
                      // 跳转
                      this.$router.go(-1);


                    }).catch(error => {
                      this.$Notice.error({
                        

                          title: '注册失败',
                      });
                      this.pending = false;
                    })
                  }
                });
              },

         
            codeBtn (){


     				let sec =60;

				    for(let  i=0; i<=60; i++){

				       var that = this;

				       window.setTimeout(function(){

				        if (sec != 0) {

				             that.codeText =  sec + "秒后重发验证" ;
				             that.disabled = true;
				             sec--;

				         } else {

				             sec = 60; //如果倒计时结束就让获取验证码显示出来
				             that.disabled = false;
				             that.codeText =  "获取验证码" ;

				        }

				       }, i * 1000)
	     			}

                    console.log(this.form.phone);
     				this.$http.post('http://www.gjypzc.cn/sendMsg',{phone:this.form.phone}).then(ret => {

			            this.testCode = ret.data.code;

			            console.log(ret.data.code);

			            this.$Message.success('获取验证码成功');

			        }).catch(err => {

			            console.log(err);

			            this.$Message.error('获取验证码失败..');
			        
			        })

            },
            toLogin(){
              this.$emit('tologin');
            },
            closeReg(){
              this.$store.dispatch('changeRegState',false);
            }

        }
    }
</script>

<style scoped> 

body {
    background-color: #eff2f7;
  }

  .login {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        /*background: url(../../assets/images/banner3.jpg)no-repeat 0 0 ;*/
        background-size: 100%;
        z-index: 99;
        left:0;
        top:0;
    }

  .login-box {
    background-color: #fff;
    padding: 20px 30px;
    width:420px;
    margin:0 auto;
    position: relative;
    top: 120px;
    border-radius: 0;

  }

  h1 {
    text-align: center;
  } 
  .close-window{
        padding:10px;
        position:absolute;
        right: 20px;
        top:10px;
        cursor: pointer;
    }
    .close-window:hover{
        color: #15ccac;
    }
    
    .title{ margin-top: 30px; margin-bottom:30px;}
    .title h2{ text-align:center;}
    .title h2 span{ font-size:26px; float: left;}
    .title p{ float: right; font-size:16px; color:#999; position: relative; top:10px;}
    .title p a{ color:#15ccac;}

/*
    body{
        background: #eee;
    }
    .body{
        width: 1200px;
        height: 600px;
        background: #fff;
        margin:0 auto;
    }
    .ivu-btn-success {
        color: #fff;
        background-color: #cd0000;
        border-color: #cd0000;
    }
    .body h1{
         text-align: center;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        margin: 0 auto;
        color: #fff;
        background: #cd0000;
        margin-top: 100px;
        border-radius: 6px 6px 0 0;
        width: 482px;
    }*/

	/*.login{

		width: 482px;
		height: 360px;
		padding: 20px;
		border-radius: 0 0 6px 6px;
		border:1px solid #ddd;
		margin:  0 auto;
	}
    .login form a:hover{
        color: #cd0000;
    }*/
</style>
